<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .outer1 {
        position: relative;
        height: 100px;
    }
    .left1 {
        position: absolute;
        height: 100px;
        width: 200px;
        background-color: rebeccapurple;
    }
    .center1 {
        height: 100px;
        margin-left: 200px;
        margin-right: 200px;
        background-color: coral;
    }
    .right1 {
        position: absolute;
        top: 0;
        right: 0;
        height: 100px;
        width: 200px;
        background-color: aqua;
    }

    .outer2 {
        display: flex;
        height: 100px;
    }
    .left2 {
        width: 200px;
        background-color: rebeccapurple;
    }
    .center2 {
        flex: 1;
        height: 100px;
        background-color: coral;
    }
    .right2 {
        width: 200px;
        background-color: aqua;
    }

    .outer3 {
        height: 100px;
    }
    .left3 {
        float: left;
        height: 100px;
        width: 200px;
        background-color: rebeccapurple;
    }
    .center3 {
        height: 100px;
        margin-left: 200px;
        margin-right: 200px;
        background-color: coral;
    }
    .right3 {
        float: right;
        height: 100px;
        width: 200px;
        background-color: aqua;
    }

    .outer4 {
        height: 100px;
        padding-left: 200px;
        padding-right: 200px;
    }
    .left4 {
        position: relative;
        left: -200px;

        float: left;
        margin-left: -100%;

        height: 100px;
        width: 200px;
        background-color: rebeccapurple;
    }
    .center4 {
        float: left;

        width: 100%;
        height: 100px;
        background-color: coral;
    }
    .right4 {
        position: relative;
        left: 200px;

        float: left;
        margin-left: -200px;

        height: 100px;
        width: 200px;
        background-color: aqua;
    }





    .outer5 {
        height: 100px;
    }
    .left5 {
        float: left;
        margin-left: -100%;

        height: 100px;
        width: 200px;
        background-color: rebeccapurple;
    }

    .wrapper {
        float: left;

        width: 100%;
        height: 100px;
        background-color: coral;
    }
    .center5 {
        height: 100px;
        margin-left: 200px;
        margin-right: 200px;
    }
    .right5 {
        float: left;
        margin-left: -200px;

        height: 100px;
        width: 200px;
        background-color: aqua;
    }


    .c1 {
        background-color: black;
    }
    .c2 {
        float: left;
        width: 100px;
        height: 100px;
        background-color: coral;
    }
    .c3 {
        width: 120px;
        height: 100px;
        background-color: rebeccapurple;
    }

</style>
<body>
    <h3>三栏布局</h3>
    <h4>左右绝对定位中间外距</h4>
    <p>关于设置top、left,元素在被设置的方向上保持“绝对定位”的特性，而在另一个（水平或垂直）方向上保持相对定位特性即可。</p>
    <div class="outer1">
        <div class="left1"></div>
        <div class="center1"></div>
        <div class="right1"></div>
    </div>
    <h4>中间Flex</h4>
    <div class="outer2">
        <div class="left2"></div>
        <div class="center2"></div>
        <div class="right2"></div>
    </div>
    <h4>左右浮动中间外距(center盒子要放最后)</h4>
    <div class="outer3">
        <div class="left3"></div>
        <div class="right3"></div>
        <div class="center3"></div>
    </div>
    <h4>通过浮动和外边距负值来实现的两个</h4>
    <h4>圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。</h4>
    <div class="outer4">
        <div class="center4"></div>
        <div class="left4"></div>
        <div class="right4"></div>
    </div>
    <h4>双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。</h4>
    <div class="outer5">
        <div class="wrapper">
            <div class="center5"></div>
        </div>
        <div class="left5"></div>
        <div class="right5"></div>
    </div>

    <div class="c1">
        <div class="c2"></div>
        <p>123</p>
    </div>


</body>
</html>